<template>
	<view class="message-container">
		<uni-search-bar placeholder="搜索" bgColor="#EEEEEE" readonly="readonly" @confirm="search" />
		<uni-list :border="true">
			
			<!-- 头像显示角标 -->
			<uni-list-chat v-for="(item,index) in userListInMessage" 
				:avatar-circle="false" 
				:title="item.nickName"
				:avatar="item.avatar"
				:note="item.messageContent" 
				:time="item.sendTime" 
				@click="messageDetailClick(item)" clickable
				badge-positon="left" :badge-text="item.notViewCount"></uni-list-chat>
			
		</uni-list>
	</view>
</template>

<script>
	import {
		queryUserListInMessage
	} from '@/api/im/friend.js'
	import config from '@/config'
	
	export default {
		data() {
			return {
				isToEnd:false,
				params:{
					remark:'',
					pageNum: 1,
					pageSize: 13},
				userListInMessage: [],
				avatarList: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}]
			}
		},
		onLoad() {
			this.queryUserListInMessage()
		},
		onReachBottom() {
			if(this.isToEnd){
				return
			}
			console.log(this.isToEnd)
			var index = this.params.pageNum
			this.params.pageNum = index + 1
			var that = this;
			var data = this.params
			queryUserListInMessage().then(response => {
				if(true){ // response.rows.length < that.params.pageSize){
					that.isToEnd = true;
				}
				for(var item of response.data){
					if(!item.avatar){
						item.avatar = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F25%2F20191225224833_zloky.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712246351&t=cad0fe94ebb387852bfff79b193399c3'
					}else{
						item.avatar = config.baseUrl + item.avatar
					}
					that.userListInMessage.push(item)
				}
				
				console.log(that.userListInMessage)
			});
		},
		methods: {
			queryUserListInMessage() {
				var that = this;
				queryUserListInMessage().then(response => {
					for(var item of response.data){
						if(!item.avatar){
							item.avatar = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F25%2F20191225224833_zloky.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712246351&t=cad0fe94ebb387852bfff79b193399c3'
						}else{
							item.avatar = config.baseUrl + item.avatar
						}
						that.userListInMessage.push(item)
					}
				});
			},
			input(){
				console.log("input")
				this.queryUserListInMessage()
			},
			clear(){
				console.log("clear")
				this.params.remark='';
			},
			cancel(){
				console.log("cancel")
				this.params.remark='';
			},
			search(){
				console.log("search")
				this.queryUserListInMessage()
			},
			messageDetailClick(item){
				console.log(item);
				uni.navigateTo({
					url: '/pages/message/detail?userId=' + item.userId
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.message-container {
		margin-bottom: 100rpx;
	}

	.list-title {
		margin-bottom: 30rpx;
	}

	.childList {
		background: #ffffff;
		box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
		border-radius: 16rpx;
		margin-top: 10rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #F5F5F5;
	}

	.text-title {
		color: #303133;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 10rpx;

	}

	.text-item {
		font-size: 28rpx;
		padding: 24rpx;
	}

	.question {
		color: #606266;
		font-size: 28rpx;
	}
</style>

